<template>
    <div>
        <h3 class="title">1.我们的婚纱照</h3>
        <video :src="url" controls width="100%" poster="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1194523921,4246299285&fm=26&gp=0.jpg"></video>
        <h3 class="title">2.结婚进行时</h3>
        <video :src="url2" controls width="100%" poster="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Ftfscom%2Fi4%2F188529342%2FTB2SelFhr9YBuNjy0FgXXcxcXXa_%21%21188529342.jpg_310x310q90.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640227372&t=565c4a3da49dc124df11011a4a931093"></video>
        <img class="img" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=37268471,2076787137&fm=26&gp=0.jpg" alt="">
    </div>
</template>

<script>
    export default {
        name: "Me",
        data() {
            return {
                url: '/api/picture/1105.mp4',
                url2: '/api/picture/1106.mp4'
            }
        }
    }
</script>

<style scoped>
    .title {
        line-height: 30px;
        text-align: center;
        font-weight: bolder;
        color: red;
    }

    @keyframes bounce {
        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(50px);
        }
        100% {
            transform: translateY(0px);
        }
    }
    .img {
        width: 30%;
        border-radius: 50%;
        animation: bounce 1.5s infinite;
    }
</style>